@import "normalize";

.soular-home-limited{
    padding: 20px 30px;
    min-width: 576px
}

.soular-layout,.ant-modal,.ant-drawer{
    .ant-form-item{
        margin-bottom: 20px !important;
    }
    .ant-form-item-label>label{
        font-size: 13px;
        color: #777;
        font-weight: 600;
    }
    .ant-form-item-label>label.ant-form-item-required:not(.ant-form-item-required-mark-optional):after {
        display: inline-block;
        margin-left: 4px;
        color: #ff4d4f;
        font-size: 14px;
        font-family: SimSun,sans-serif;
        line-height: 1;
        content: "*";
    }
    .ant-form-item-label>label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
        display: none !important;
        content: "" !important;
    }
    .ant-form-item-explain{
        font-size: 13px !important;
    }
    .ant-form-item-explain-error{
        min-height: 20px !important;
        height: 20px !important;
    }
    .ant-table-thead>tr>th{
        background: #ffffff;
        padding: 8px;
        font-size: 13px;
        color: #777;
        font-weight: 600;
    }
    .ant-table-tbody>tr>td{
        border: none;
        padding: 8px;
    }
    .ant-table{
        border-bottom: 1px solid #f0f0f0;
    }
    .ant-empty-image{
        margin-bottom: 0;
        .ant-empty-img-default{
            width: 100px;
        }
    }
    .ant-empty-description{
        font-size: 13px;
        color: #999;
        padding-bottom: 8px;
    }
}

.ant-modal,.ant-drawer{
    .ant-btn{
        font-weight: 600;
        border-radius: 4px;
    }
}

.soular-user-avatar {
    &:nth-child(5n+1) {
        .ant-avatar {
            background-color: #e9b4b4;
        }
    }

    &:nth-child(5n+2){
        .ant-avatar {
            background-color: #b1c1d7;
        }
    }

    &:nth-child(5n+3){
        .ant-avatar {
            background-color: #afb3ce;
        }
    }

    &:nth-child(5n+4) td{
        .ant-avatar{
            background-color: #c4d3bd;
        }
    }

    &:nth-child(5n+5){
        .ant-avatar {
            background-color: #a8d4d0;
        }
    }

}

:root {

    --tiklab-white: #fff;   /* 主色调白*/
    --tiklab-black: #000;   /* 主色调黑 */
    --tiklab-blue: #0d66e4;   /* 主色调蓝 */
    --tiklab-gray-200: #ececec;  /* border 的边线 */
    --tiklab-gray-300: #edf0f5;  /* hover颜色 */
    --tiklab-gray-400: #e3e8f0;  /* 左侧导航 选中颜色 */
    --tiklab-gray-500: #999999; /* 文字次级颜色灰色调 */
    --tiklab-gray-600: #fafbfc; /* 侧边栏色调 */
    --tiklab-gray-700: #f0f3fa; /* 内容区域色调 */
    --tiklab-gray: #efefef;  /* 主色调灰 */


    --tiklab-padding: 20px;  /*页面边距 */
    --tiklab-padding-resove: -20px; /* 页面边距 */
    --tiklab-padding-item: 15px;  /* 元素间隔边距 */
    --tiklab-padding-resove-item:-15px;  /* 元素间隔边距 */

    --tiklab-font-12: 12px;  /* 图文排需要的文字 */
    --tiklab-font-13: 13px;  /* 描述文字 */
    --tiklab-font-14: 14px; /* 正文 */
    --tiklab-font-15: 15px;  /* 2级标题*/
    --tiklab-font-16: 16px;  /* 标题 */

    --tiklab-font-weight-bold: bold;  /* 标题字重 */

    /* 图标大小 */
    --tiklab-icon-size-16: 16px;
    --tiklab-icon-size-20: 20px;
    --tiklab-icon-size-22: 22px;
    --tiklab-icon-size-24: 24px;
    --tiklab-icon-size-32: 32px;

    --soular-border-color: var(--tiklab-gray-200);
    --soular-hover-color: var(--tiklab-gray-300);
    --soular-select-color: var(--tiklab-gray-400);
    --soular-aside-color: var(--tiklab-gray-700);
    --soular-backdrop-color: var(--tiklab-gray-600);
    --soular-head-height: 48px;
    --soular-content-height: calc(100% - 48px)

}


